<template>
  <el-dialog
    :close-on-click-modal="false"
    :close-on-press-escape="false"
    title="下发"
    :append-to-body="true"
    :visible="stageVisible"
    width="75%"
    @close="close"
  >
    <div style="margin-bottom: 10px;" class="flex-x">
      <el-popover
        popper-class="preview_popover"
        @show="showPreChart"
        placement="left"
        width="400"
      >
        <PreviewChart
          ref="previewChartRef"
          :chartData="form.tableData"
        ></PreviewChart>
        <el-button icon="el-icon-view" slot="reference" size="small"
          >预览工艺曲线</el-button
        >
      </el-popover>
      <!-- <el-radio v-model="doubleTooling" label="双层工装"></el-radio> -->
      <div style="margin-left: 20px;">
        <span style="margin-right: 10px;" @change="changeTooling">
          双层工装:
        </span>
        <el-radio-group v-model="doubleToolingRadio">
          <el-radio :label="1">是</el-radio>
          <el-radio :label="0">否</el-radio>
        </el-radio-group>
      </div>
    </div>
    <el-form
      class="iss_form"
      :model="form"
      ref="formName"
      :inline="false"
      size="normal"
    >
      <el-table :data="form.tableData" border stripe size="small">
        <el-table-column prop="stageId" label="" align="center">
          <template slot-scope="scope"> {{ scope.$index + 1 }} </template>
        </el-table-column>
        <el-table-column
          prop="setTime"
          label="设定时间min"
          align="center"
          width="190px"
        >
          <template slot-scope="scope">
            <el-tag
              v-if="
                scope.row[formulaRules.UP_HEAT_TIME] &&
                  scope.row[formulaRules.DOW_HEAT_TIME]
              "
            >
              <span class="el-icon-message-solid"> </span>
              请输入{{ scope.row[formulaRules.DOW_HEAT_TIME] }}min -
              {{ scope.row[formulaRules.UP_HEAT_TIME] }}min</el-tag
            >
            <el-tag
              v-else-if="
                scope.row[formulaRules.UP_TIME] &&
                  scope.row[formulaRules.DOW_TIME]
              "
            >
              <span class="el-icon-message-solid"> </span>
              请输入{{ scope.row[formulaRules.DOW_TIME] }}min -
              {{ scope.row[formulaRules.UP_TIME] }}min</el-tag
            >
            <div v-else style="height: 31px;"></div>
            <!-- (scope.row[formulaRules.UP_HEAT_TIME] &&
                      scope.row[formulaRules.DOW_HEAT_TIME]) ||
                    (scope.row[formulaRules.UP_TIME] &&
                      scope.row[formulaRules.DOW_TIME]) -->
            <el-form-item
              :prop="`tableData.${scope.$index}.setTime`"
              :rules="[
                {
                  required: true,
                  message: '设定时间不能为空',
                  trigger: 'blur'
                },

                {
                  validator(rule, value, callback) {
                    validatorFormTime(rule, value, callback, scope.row);
                  },
                  trigger: 'blur'
                }
              ]"
              label=""
            >
              <el-input
                v-model="scope.row.setTime"
                placeholder="请输入设定时间min"
                size="mini"
                clearable
              ></el-input>
            </el-form-item>
          </template>
        </el-table-column>
        <el-table-column
          prop="setTemp"
          label="设定温度℃"
          align="center"
          width="190px"
        >
          <template slot-scope="scope">
            <!-- <el-tag
              v-if="scope.row[formulaRules.UP_TIME] && scope.row[formulaRules.DOW_TIME]"
              >请输入{{ scope.row[formulaRules.UP_TIME] }}min -
              {{ scope.row[formulaRules.DOW_TIME] }}min</el-tag
            > -->
            <el-tag
              v-if="
                scope.row[formulaRules.UP_TEMP] &&
                  scope.row[formulaRules.DOW_TEMP]
              "
            >
              <span class="el-icon-message-solid"> </span>
              请输入{{ scope.row[formulaRules.DOW_TEMP] }}℃ -
              {{ scope.row[formulaRules.UP_TEMP] }}℃</el-tag
            >
            <div v-else style="height: 31px;"></div>
            <!-- scope.row[formulaRules.UP_TEMP] &&
                    scope.row[formulaRules.DOW_TEMP], -->
            <el-form-item
              :prop="`tableData.${scope.$index}.setTemp`"
              :rules="[
                {
                  required: true,

                  message: '设定温度不能为空',
                  trigger: 'blur'
                },

                {
                  validator(rule, value, callback) {
                    validatorFormTemp(rule, value, callback, scope.row);
                  },
                  trigger: 'blur'
                }
              ]"
              label=""
            >
              <el-input
                v-model="scope.row.setTemp"
                placeholder="请输入设定温度℃"
                size="mini"
                clearable
              ></el-input>
            </el-form-item>
          </template>
        </el-table-column>
        <el-table-column
          v-for="(item, index) in formulaParameter"
          :key="index"
          :prop="item.key"
          :label="item.label"
          align="center"
          width="150px"
        >
          <template slot-scope="scope">
            {{ scope.row[item.key] }}
          </template>
        </el-table-column>
      </el-table>
    </el-form>
    <span slot="footer">
      <el-button
        type="primary"
        :loading="stageBtnloading"
        @click="submit"
        size="small"
        >确认下发</el-button
      >
      <el-button @click="close" size="small"> 取 消</el-button>
    </span>
  </el-dialog>
</template>

<script>
import { getTaskDownLoadInfos } from "@/api/deviceOperation";
import { generateId } from "@/utils";
import { formulaRules } from "@/views/centralizedControl/deviceOperation/constant";
import PreviewChart from "./PreviewChart.vue";
export default {
  components: {
    PreviewChart
  },
  props: {
    // 是否是下发按钮
    isIssued: {
      type: Boolean,
      default: false
    },
    stageVisible: {
      type: Boolean,
      default: false
    },
    stageBtnloading: {
      type: Boolean,
      default: false
    },
    form: {
      type: Object,
      default: () => {
        return {
          tableData: []
        };
      }
    },
    formulaParameter: {
      type: Array,
      default: () => []
    }
  },

  computed: {
    // 校验字段
    formulaRules() {
      return formulaRules;
    },
    validatorFormTemp() {
      return function(rule, value, callback, row) {
        // 上限500 下限400  只能输入500 - 400之前
        // value  当前输入的值
        if (value) {
          if (isNaN(value)) {
            return callback(new Error("请输入数字"));
          }
        }
        if (!row[formulaRules.UP_TEMP] && !row[formulaRules.DOW_TEMP]) {
          callback();
        }

        const shang = row[formulaRules.UP_TEMP];
        const xia = row[formulaRules.DOW_TEMP];
        if (shang && xia) {
          if (value > Number(shang) || value < Number(xia)) {
            callback(new Error(`设定温度必须输入${xia} - ${shang}`));
          } else {
            callback();
          }
        } else {
          callback();
        }
      };
    },
    validatorFormTime() {
      return function(rule, value, callback, row) {
        // value  当前输入的值
        if (value) {
          if (isNaN(value)) {
            return callback(new Error("请输入数字"));
          }
        }
        // 不是双层工装的 直接返回 不做下方的工艺校验
        console.log("是否是双层工装. :>> ", this.doubleToolingRadio);
        if (this.doubleToolingRadio) {
          callback();
        }
        const shang = row[formulaRules.UP_TIME];
        const xia = row[formulaRules.DOW_TIME];
        const shang2 = row[formulaRules.UP_HEAT_TIME];
        const xia2 = row[formulaRules.DOW_HEAT_TIME];
        if (!shang && !xia && !shang2 && !xia2) {
          callback();
        }
        if (shang2 && xia2) {
          if (value > Number(shang2) || value < Number(xia2)) {
            callback(new Error(`设定时间必须输入${xia2} - ${shang2}`));
          } else {
            callback();
          }
        }
        if (shang && xia) {
          if (value > Number(shang) || value < Number(xia)) {
            callback(new Error(`设定时间必须输入${xia} - ${shang}`));
          } else {
            callback();
          }
        } else {
          callback();
        }
      };
    }
  },
  data() {
    return {
      doubleToolingRadio: 1
    };
  },
  watch: {},
  mounted() {
    // 获取任务下发弹框列表
    // this.getTaskDownLoadInfos();
  },
  methods: {
    // 动态触发校验
    changeTooling() {},
    // 监听预览弹框显示
    showPreChart() {
      this.$nextTick(() => {
        this.$refs.previewChartRef.init();
      });
    },
    // 删除阶段
    del(index) {
      this.form.tableData.splice(index, 1);
    },
    submit() {
      this.$refs["formName"].validate(valid => {
        if (valid) {
          this.$emit("submit");
        }
      });
    },
    addFormula() {
      this.form.tableData.push({
        setTime: "",
        setTemp: "",
        volumeTemp: "",
        id: generateId()
      });
    },
    close() {
      this.$emit("update:stageVisible", false);
    }
  }
};
</script>

<style lang="scss">
.iss_form {
  // .el-form-item {
  //   margin-bottom: 0;
  // }
  .el-form-item__content {
    margin-left: 0 !important;
  }
}
</style>
